<template>
    <view class="azm-organized-index flex flex-direction h100">
        <navBar mClass="bg-blue" ref="navBar" :options="navigationBarOptions" @navBarLoad="handleNavBarLoad"/>
        <view class="flex-sub overflow-hidden">
            <scroll-view scroll-y class="h100">
                <view class="azm-header">
                    <image lazy-load class="image" :src="bgImg"/>
                    <view class="azm-header-box flex align-center" @tap.stop="handleLookStaffDetails(userInfo.user_id)">
                        <view class="azm-avatar">
                            <image lazy-load class="avatar" v-if="userInfo.avatar !== false"
                                   :src="userInfo.avatar | ic_image_filter" mode="aspectFill"
                                   @error="handleImageError(modifyUserInfo, 'avatar', 'avatar')"/>
                        </view>
                        <view class="flex-sub">
                            <p class="azm-nickname text-bold azm-ellipsis--l1">
                                <text>{{ userInfo.nickname || "" }}</text>
                            </p>
                            <p class="azm-desc azm-ellipsis--l1">
                                <text>
                                    <text>{{ userInfo.company_name || "" }}</text>
                                    <text v-if="userInfo.position">· {{ userInfo.position }}</text>
                                </text>
                            </p>
                        </view>
                        <button class="cu-btn azm-userinfo-edit flex align-center justify-end" hover-class="none">
                            <text @tap.stop="handleViewCardPersonal(userInfo.card_id)" class="azm-create-card"
                                  v-if="userInfo.card_id">查看名片
                            </text>
                            <text class="azm-create-card" @tap.stop="handleCreateCardPersonal()" v-else>创建名片
                            </text>
                        </button>
                    </view>
                </view>
                <view class="cu-list menu sm-border show-last-child">
                    <view class="cu-item" @tap.stop="handleToLoginLink('/pages/mine/info/index',2)">
                        <view class="content flex align-center">
                            <text class="tlIcon-my_company azm-icon"></text>
                            <text class="azm-title">企业信息</text>
                        </view>
                        <view class="action">
                            <text class="text-blue azm-text-right" v-if="userInfo.role < 2">
                                完善度{{ userInfo.company_info_completion |ic_number_filter }}%
                            </text>
                            <text class="tlIcon-personalcenter_enter azm-icon-right"></text>
                        </view>
                    </view>
                    <view class="cu-item" @tap.stop="handleToCompanyAuth" v-if="userInfo.role < 2">
                        <view class="content flex align-center">
                            <text class="tlIcon-my_identification azm-icon"></text>
                            <text class="azm-title">企业认证</text>
                        </view>
                        <view class="action">
                            <text class="azm-text-right" :class="'azm-color-' + userInfo.audit"
                                  v-if="userInfo.audit !== 2">
                                <block v-if="userInfo.audit === 3">认证失败</block>
                                <block v-else-if="userInfo.audit === 1">待审核</block>
                                <block v-else>未认证</block>
                            </text>
                            <text class="tlIcon-personalcenter_enter azm-icon-right"></text>
                        </view>
                    </view>
                    <view class="cu-item" @tap.stop="handleToLoginLink('/pages/mine/company_switch/index',2)">
                        <view class="content flex align-center">
                            <text class="tlIcon-my_exchange azm-icon"></text>
                            <text class="azm-title">切换企业</text>
                        </view>
                        <view class="action">
                            <text class="tlIcon-personalcenter_enter azm-icon-right"></text>
                        </view>
                    </view>
                    <view class="cu-item" @tap.stop="handleToLoginLink('/pages/mine/help/index',false)">
                        <view class="content flex align-center">
                            <text class="tlIcon-my_feedback azm-icon"></text>
                            <text class="azm-title">帮助与反馈</text>
                        </view>
                        <view class="action">
                            <text class="tlIcon-personalcenter_enter azm-icon-right"></text>
                        </view>
                    </view>
                    <view class="cu-item" @tap.stop="handleToManual">
                        <view class="content flex align-center">
                            <text class="tlIcon-my_note azm-icon"></text>
                            <text class="azm-title">新手使用手册</text>
                            <!-- <web-view v-if="isNavigateTo" src="https://res.tuoluocard.com/card-enterprise/bixiao/res/manual.docx"></web-view> -->
                        </view>
                        <view class="action">
                            <text class="tlIcon-personalcenter_enter azm-icon-right"></text>
                        </view>
                    </view>
                    <view class="cu-item" @tap.stop="handleToLoginLink('/pages/mine/setting/index')">
                        <view class="content flex align-center">
                            <text class="tlIcon-my_setting azm-icon"></text>
                            <text class="azm-title">设置</text>
                        </view>
                        <view class="action">
                            <text class="tlIcon-personalcenter_enter azm-icon-right"></text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import UserOperatingMixins from "@u/Login/UserOperatingMixins.js";
    import { mapGetters } from "vuex";

    export default {
        mixins: [UserOperatingMixins],
        components: {},
        computed: {
            ...mapGetters({
                noDataType: 'System/noDataType', //1：登录 2：公司 3：名片
            })
        },
        data () {
            return {
                bgImg: require("../../../static/image/my_bg.svg"),
                navigationBarOptions: {
                    title: "",
                    backgroundColor: "#0075FF",
                    navigationBarTextStyle: "white"
                },
                navBarTop: 0,
                isNavigateTo: false,
            };
        },
        mounted () {
            this.loadData();
        },
        props: {
            bottom: {
                type: Number,
                default: 50,
            },
        },
        methods: {
            handleRefresh () {
                this.loadData();
            },
            async loadData () {
            },
            handleToManual () {
                uni.downloadFile({
                    url: 'https://res.tuoluocard.com/card-enterprise/bixiao/res/manual.docx',
                    success: function (res) {
                        const filePath = res.tempFilePath
                        console.log(res)
                        uni.openDocument({
                            filePath: filePath,
                            fileType: 'docx',
                            // showMenu:true,
                            success: function (res) {
                                console.log('打开文档成功')
                            }
                        })
                    }

                })
                // this.$$router.push({
                //     path: "/pages/mine/manual/index",
                // });
            },

            handleToCompanyAuth () {
                if (this.userInfo.role >= 2) return;
                switch (this.userInfo.audit) {
                    case 3:
                        this.handleToLoginLink({
                            path: "/pages/mine/authentication/fail",
                        }, 2);
                        break;
                    case 2:
                        this.handleToLoginLink({
                            path: "/pages/mine/authentication/getInformation",
                        }, 2);
                        break;
                    case 0:
                        this.handleToLoginLink({
                            path: "/pages/mine/authentication/index",
                        }, 2);
                        break;
                    case 1:
                        this.handleToLoginLink({
                            path: "/pages/mine/authentication/success",
                        }, 2);
                        break;
                }
            },
            handleLookStaffDetails (value) {
                this.handleToLoginLink({
                    path: "/pages/organized/staff/details",
                    query: {
                        id: value
                    }
                }, 2)
            }
        },
    };
</script>

<style scoped lang="scss">
    .cu-list.menu > .cu-item {
        background-color: transparent;
    }

    .azm-organized-index {
        background: rgba(255, 255, 255, 1);

        .azm-header {
            color: #fff;
            position: relative;

            // padding: 0 14*2upx 17*2upx;
            .image {
                position: relative;
                top: -2upx;
                width: 100%;
                height: 214*1rpx;
            }

            .azm-avatar {
                width: 57*2upx;
                height: 57*2upx;
                border-radius: 100%;
                margin-right: 10*2upx;
                border: $cu-avatar-border-1px;

                .avatar {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                }
            }

            &-box {
                position: absolute;
                top: 20*1rpx;
                left: 0;
                background: #fff;
                padding: 56*1rpx 28*1rpx;
                border-radius: 12*2upx;
                box-shadow: 0px 10px 30px 0px rgba(236, 236, 236, 0.52);
                width: 694*1rpx;
                margin: 0 28*1rpx;
            }

            .azm-nickname {
                font-size: 22*2upx;
                height: 24*2upx;
                line-height: 24*2upx;
                color: #313131;
                font-weight: bold;
            }

            .azm-desc {
                margin-top: 8*2upx;
                font-size: 13*2upx;
                height: 16*2upx;
                line-height: 16*2upx;
                color: #6b6b6b;
				width:346rpx; 
				
            }

            .azm-userinfo-edit {
                position: absolute;
                // top: 95*1rpx;
                right: 28*1rpx;
                //   height: 32*2upx;
                border-radius: 32*1rpx;
                font-size: 12*2upx;
                padding: 12*1rpx 22*1rpx;
                background: #0075ff;
                color: #fff;
                //   line-height: 16*2upx;
                font-weight: bold;

                .azm-icon {
                    font-size: 8*2upx;
                    margin-left: 3*2upx;
                }
            }
        }

        .azm-text-right {
            font-size: 13*2upx;
        }

        .cu-item {
            height: 62*2upx;

            .azm-title {
                color: #0D0D0D;
                height: 24*2upx;
                font-size: 15*2upx;
                font-weight: 400;
                line-height: 24*2upx;
            }

            .azm-icon {
                color: #0D0D0D;
                font-size: 24*2upx;
                font-weight: 400;
                margin-right: 5*2upx;
            }

            .azm-icon-right {
                color: #D2D4D4;
                font-size: 15*2upx;
            }

            .azm-color {
                &-0 {
                    color: #a2a8a8;
                }

                &-1 {
                    color: #0075ff;
                }

                &-3 {
                    color: #ff4d00;
                }
            }
        }
    }

    .cu-list.menu {
        margin-top: 23*2upx;
        background: rgba(255, 255, 255, 1);
    }
</style>
